<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>好家伙零食商城购物车</title>
<base href="../">
<meta name="keywords" content="小吃,美食,零食,源辰" />
<meta name="description" content="各种小吃美食，应有尽有" />
<link href="images/yc.png" rel="shortcut icon" type="image/x-icon" />
<link href="css/header.css" rel="stylesheet" type="text/css" />
<link href="css/cart.css" rel="stylesheet" type="text/css" />
<link href="css/footer.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<!-- 顶部区域 -->
<header id="header">
	<!-- 顶部标题区域 -->
<div class="htitle">
	<a href="#" target="_blank" class="location">衡阳</a>

	<div class="header-info" id="login_info">
		<div class="login-info" v-if="onlogin">
			<a href="login.html" title="点击登录" target="_blank">欢迎您：{{nickName}}</a>
			<a href="register.html" title="点击注册"> 免费注册 </a>
		</div>
		<div class="login-info" v-else>
			<a href="login.html" title="点击登录">您好，请登录</a> <a
				href="register.html" title="点击注册"> 免费注册 </a>
		</div>

		<div class="person-info">
			<span>|</span> <a href="front/order.html" target="_blank">我的订单</a>
			<span>|</span> <a href="#" target="_blank">我的小吃</a> <span>|</span>
			<a href="#" target="_blank">客户服务</a> <span>|</span> <a href="#"
				target="_blank">个人信息</a>
		</div>

	</div>
</div>

<!-- 顶部搜索区域 -->
	<div class="search">
		<div class="search_left">
			<a href="index.html" title="首页"> <img src="images/logo.png"
				width="260px" height="120px" />
			</a>
		</div>

		<div class="search_right" id="search_item">
			<div class="search_top">
				<div class="search_div">
					<input type="search" class="search-ipt" placeholder="请输入要搜索的内容" />
					<input type="button" class="search-btn" />
				</div>
				<div class="buycart">
					<i class="iconfont">{{cartCount}}</i> <a href="front/cart.html"
						target="_blank">我的购物车</a>
				</div>
			</div>

			<div class="search_item" id="search_item">
				<a href="javascript:void(0)" data-tno="" class="selected"
					@click="findByTno(0,'')">全部</a> <a v-for="(type,index) in types"
					href="javascript:void(0)" @click="findByTno(index+1,type.tno)">{{type.tname}}</a>
			</div>
		</div>
	</div>
</header>
<!-- 购物车 -->
<article id="app">
	<div class="cart_con">
		<h2 class="total_count">
			全部商品<em id="totalcount">{{totalCount}}</em>件
		</h2>
		<div class="cart_list_th clearfix">
			<ul>
				<li class="col01">商品名称</li>
				<li class="col02">商品单位</li>
				<li class="col03">商品价格(元)</li>
				<li class="col04">数量</li>
				<li class="col05">小计</li>
				<li class="col06">操作</li>
			</ul>
		</div>
		<div class="cart_list_td clearfix" id="cart_list">
			<ul v-for="(item,index) in carts" :id="'1_'+index">
				<li class="col01"><input type="checkbox" checked :data-index="index" :data-cno="item.cno"></li>
				<li class="col02"><img :src="item.pics"></li>
				<li class="col03">{{item.gname}}<br><em>{{item.price}}元/{{item.unit}}</em></li>
				<li class="col04">{{item.weight}}g</li>
				<li class="col05">{{item.price}}</li>
				<li class="col06">
					<div class="num_add">
						<a href="javascript:void(0)" @click="lost(index,item.cno)"
							class="minus fl">-</a> <input type="text" v-model="nums[index]"
							class="num_show fl"> <a href="javascript:void(0)"
							@click="add(index,item.cno)" class="add fl">+</a>
					</div>
				</li>
				<li class="col07" v-html="(item.price * nums[index]).toFixed(2)"></li>
				<li class="col08"><a href="javascript:;"
					@click="delGoods(index,item.cno)">删除</a></li>
			</ul>

		</div>
		<div class="setElements">
			<ul>
				<li class="col01"><input type="checkbox" checked id="all"></li>
				<li class="col02"><label for="all">全选</label></li>
				<li class="col03">合计(不含运费)：<span>&yen;</span><em
					id="totalPrices">{{totalPrice}}</em><br>共计<b id="totalNumbers">{{totalCount}}</b>件商品
				</li>
				<li class="col04"><a href="javascript:gotoPay()" >去结算</a></li>
			</ul>
		</div>
	</div>
</article>
<div class="popup_con">
	<div class="popup">
		<p id="popup_info"></p>
	</div>
</div>   

<footer>
	<div class="foot_link">
		<a href="#">关于我们</a> <span> | </span> <a href="#">联系我们</a> <span>
			| </span> <a href="#">招聘广告</a> <span> | </span> <a href="#">友情链接</a>
	</div>
	<p>
		CopyRight &copy; 2019 <a class="copy" href="http://www.hyycinfo.com"
			target="_blank">衡阳市源辰信息科技有限公司</a> All Rights Reserverd
	</p>
	<p>电话：0734-8355998 湘ICP备16015987号-1</p>
</footer>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="js/vue.js" type="text/javascript"></script>
<script src="js/axios.js" type="text/javascript"></script>
<script src="js/qs.js" type="text/javascript"></script>
<script src="js/checklogin.js" type="text/javascript"></script>
<script src="js/getcartinfo.js" type="text/javascript"></script>
<script type="text/javascript">
  let show = new Vue({
  	el:"#app",
  	data:{
  		carts:{},
  		totalCount:0,
  		totalPrice:0,
  		nums:[],
  		prices:[],
  		status:[]
  	},
  	mounted:function(){
  		axios.get("cart/finds").then(result=>{
  			if(result.data.code == 200){
  				this.carts = result.data.data;
  				this.carts.forEach((item,index)=>{
  					this.nums.push(item.num);
  					this.prices.push(item.price);
  					this.status.push(true);
  					this.totalCount += item.num;
  					this.totalPrice += item.num * item.price;
  				})
  				this.totalPrice = parseFloat(this.totalPrice.toFixed(2)); //最后保留两位小数
  				
  				this.$nextTick(function(){
  					bindInfo();
  				})
  			}else if(result.data.code==502){
				showMsg("购物车空空如也，立即去购买",function(){
					location.href="index.html";
				});
			}

  		})
  		window.changeAll = this.changeAll;
  		window.changes = this.changes;
  	},
  	methods :{
  		lost:function(index,cno){
  			let val = this.nums[index];
  			if(val <= 1){
  				return;
  			}
  			axios.post("cart/update",qs.stringify({num:-1,cno:cno})).then(result=>{
  				if(result.data.code == 200){
  					this.$set(this.nums,index,val-1);
  		  			this.getTotal();
  				}
  			})
  			
  		},
  		add:function(index,cno){
  			let val = this.nums[index];
  			axios.post("cart/update",qs.stringify({num:+1,cno:cno})).then(result=>{
  				if(result.data.code == 200){
  					this.$set(this.nums,index,val+1);
  		  			this.getTotal();
  				}
  			})
  		},
  		getTotal:function(){
  			this.totalCount = 0;
  			this.totalPrice = 0;
  			this.nums.forEach((num,index) =>{
  				if(this.status[index]){  //说明一项勾选了，则需要计算
  					this.totalCount += num;
  				    this.totalPrice += num * this.prices[index];
  					
  				}
  			})
  			this.totalPrice = parseFloat(this.totalPrice.toFixed(2)); //最后保留两位小数
  		},
  		changeAll: function(rt){
  			this.nums.forEach((num,index)=>{
  				this.$set(this.status,index,rt);
  			})
  			this.getTotal();
  		},
  		changes:function(index,rt){
  			this.$set(this.status,index,rt);
  			this.getTotal();
  		},
  		delGoods:function(index,cno){
  			if(confirm("数据一旦删除将不能恢复，您确定要删除吗？")){  //如果用户选择确认删除
  				axios.post("cart/delete",qs.stringify({cno:cno})).then(result =>{
  					if(result.status == 200 && result.data.code == 200){
  						//将这条数据从页面删除
  						$("#1_"+index).remove();
  						
  						//重新计算总价，将已删除的这行对应的状态改成false
  						this.$set(this.status,index,false);
  						
  						this.getTotal();
  						
  						showMsg("购物车删除成功...",null);
  					}else{
  						showMsg("购物车删除失败,请稍后重试...",null);
  					}
  				})
  				
  			}
  		}
  	}
  })
  
  function bindInfo(){
	  $("#all").click(function(){
		  var flag = $(this).prop("checked");
		  $("#cart_list .col01>input").prop("checked",flag);
		  changeAll(flag);
	  })
	  var checkboxs = $("#cart_list .col01>input[type='checkbox']");
	  console.info(checkboxs.length);
	  var len = checkboxs.length;
	  
	  for(var i =0;i<len;i++){
		  checkboxs[i].onclick = function(){
			  if(this.checked == true){  //说明当前这个选中了
				  changes($(this).data("index"),true);
			  }else{
				  changes($(this).data("index"),false);
			  }
			  
			  for(var j = 0;j<len;j++){
				  if(!checkboxs[j],checked){
					  $("#all").prop("checked",false);
					  return;
				  }
			  }
			  $("#all").prop("checked",true);
		  }
	  }
  }
function gotoPay(){
	var cnos = [];
	//获取用户选择中的商品
	$("#cart_list .col01 input[type='checkbox']:checked").each(function(index,item){
		//获取你这个复选框里面的data-cno属性的值
		cnos.push($(this).data("cno"));  //去当前对象data里面的cno属性值，取出这个商品的购物车编号
	})
	if(cnos.length <= 0){
		showMsg("请选择您要结算的商品...",null);
		return;
	}
	
   //采用本地存储   他是永久存储类型
    localStorage.removeItem("cnos");  //现重本地存储中移除这个属性
	localStorage.setItem("cnos",cnos.join(","));  //将数组以逗号拼接成字符串，存到本地的cnos键中
	location.href = "front/pay.html";
}
</script>
</body>
</html>
